<template>
  <el-table :data="filterTableData" style="width: 100%;height: 870px;">
    <el-table-column label="影像号" prop="imageNo" />
    <el-table-column label="患者id" prop="userId" />
    <el-table-column label="影像类型" prop="imageType" />
    <el-table-column label="影像" prop="image" />
    <el-table-column label="生成时间" prop="createTime"/>
    <el-table-column label="出片医院" prop="fromHospital" />
    <el-table-column label="报告号" prop="reportNo" />
    <el-table-column label="是否经过预处理" prop="preprocess" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="搜索" />
      </template>

      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">查看详细</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogFormVisible" title="查看影像" style="height:700px;width: fit-content" >
    <el-image  :src="url" lazy style="height: 600px;width: fit-content" />
  </el-dialog>

</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref, toRefs } from 'vue'
import { getAllImages} from '../../api/user.js';
import dayjs from "dayjs"
interface Image {
  imageNo: string
  userId: string
  imageType: string
  image: string
  createTime: string
  fromHospital: string
  reportNo: string
  preprocess: string

}
const url=ref("")

onMounted(() => {
  getAllImages().then(res => {
    console.log(res.data);
    res.data.forEach(item => {
      //@ts-ignore
      item.createTime = Math.floor(item.createTime / 1000)
      //@ts-ignore
      item.createTime = dayjs.unix(item.createTime).format('YYYY-MM-DD')
    })
    images.value = res.data

  })

})
const data = reactive({
  images: [] as Image[],
  dialogFormVisible: false,
  image:{} as Image

})
const formLabelWidth = ref('140px')

// let user: User = reactive({
//   id: "",
//   name: "",
//   identityNum: "",
//   gender: "",
//   age: "",
//   phone: "",
//   password: "",
//   job: "",
//   role: "",
//   address: "",
//   createTime: "",
//
// })

let { images, dialogFormVisible } = toRefs(data)

const search = ref('')
let filterTableData = computed(() =>
    images.value.filter(
        (data) =>
            !search.value ||
            data.imageType.includes(search.value)
    )
)

const handleEdit = (index: number, row: Image) => {
  url.value=row.image
  dialogFormVisible.value = true
  Object.assign(data.image, row);

}
// const handleDelete = async (index: number, row: Image) => {
//   console.log(index, row)
//   try {
//     const res = await deleteUserById(row.imageNo)
//     if (res.data.code == 200 && index !== -1) {
//       images.value.splice(index, 1); // 删除行
//       images.value = [...images.value]; // 更新数据源
//     }
//   } catch (error) {
//     console.error(error);
//   }
// }

// async function confrimEdit() {
//   const res = await editUser(data.image)
//   if (res.data.code == 200) {
//     dialogFormVisible.value = false
//     location.reload();
//
//   }
// }

</script>